<style>
  .welcome .layui-card {
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  .welcome .icon {
    margin-right: 10px;
    color: #1aa094;
  }

  .welcome .icon-cray {
    color: #ffb800 !important;
  }

  .welcome .icon-blue {
    color: #1e9fff !important;
  }

  .welcome .icon-tip {
    color: #ff5722 !important;
  }

  .welcome .layuimini-qiuck-module {
    text-align: center;
    margin-top: 10px;
  }

  .welcome .layuimini-qiuck-module a i {
    display: inline-block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 2px;
    font-size: 30px;
    background-color: #f8f8f8;
    color: #333;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
  }

  .welcome .layuimini-qiuck-module a cite {
    position: relative;
    top: 2px;
    display: block;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
  }

  .welcome .welcome-module {
    width: 100%;
    height: 210px;
  }

  .welcome .panel {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .welcome .panel-body {
    padding: 10px;
  }

  .welcome .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    color: inherit;
  }

  .welcome .label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    /* margin-top: .3em; */
  }

  .welcome .layui-red {
    color: red;
  }

  .welcome .main_btn>p {
    height: 40px;
  }

  .welcome .layui-bg-number {
    background-color: #f8f8f8;
  }

  .welcome .layuimini-notice:hover {
    background: #f6f6f6;
  }

  .welcome .layuimini-notice {
    padding: 7px 16px;
    clear: both;
    font-size: 12px !important;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease-in-out;
  }

  .welcome .layuimini-notice-title,
  .layuimini-notice-label {
    padding-right: 70px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .welcome .layuimini-notice-title {
    line-height: 28px;
    font-size: 14px;
  }

  .welcome .layuimini-notice-extra {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 16px;
    display: inline-block;
    height: 16px;
    color: #999;
  }
</style>
<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main welcome">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <i class="fa fa-warning icon"></i>数据统计
              </div>
              <div class="layui-card-body">
                <div class="welcome-module">
                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs6">
                      <div class="panel layui-bg-number">
                        <div class="panel-body">
                          <div class="panel-title">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>用户统计</h5>
                          </div>
                          <div class="panel-content">
                            <h1 class="no-margins">{$data['count']['user']}</h1>
                            <small>当前分类总记录数</small>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-xs6">
                      <div class="panel layui-bg-number">
                        <div class="panel-body">
                          <div class="panel-title">
                            <span class="label pull-right layui-bg-cyan">实时</span>
                            <h5>卡密数量</h5>
                          </div>
                          <div class="panel-content">
                            <h1 class="no-margins">{$data['count']['kami']}</h1>
                            <small>当前分类总记录数</small>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-xs6">
                      <div class="panel layui-bg-number">
                        <div class="panel-body">
                          <div class="panel-title">
                            <span class="label pull-right layui-bg-orange">实时</span>
                            <h5>在线人数</h5>
                          </div>
                          <div class="panel-content">
                            <h1 class="no-margins">{:NumberHeartbeat(true)}</h1>
                            <small>当前分类总记录数</small>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-xs6">
                      <div class="panel layui-bg-number">
                        <div class="panel-body">
                          <div class="panel-title">
                            <span class="label pull-right layui-bg-green">实时</span>
                            <h5>留言反馈</h5>
                          </div>
                          <div class="panel-content">
                            <h1 class="no-margins">{$data['count']['say']}</h1>
                            <small>当前分类总记录数</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <i class="fa fa-credit-card icon icon-blue"></i>快捷入口
              </div>
              <div class="layui-card-body">
                <div class="welcome-module">
                  <div class="layui-row layui-col-space10 layuimini-qiuck">
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="navset" data-title="菜单管理"
                        data-icon="fa fa-window-maximize">
                        <i class="fa fa-window-maximize"></i>
                        <cite>导航设置</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="webset" data-title="系统设置" data-icon="fa fa-gears">
                        <i class="fa fa-gears"></i>
                        <cite>系统设置</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="collectset" data-title="采集设置"
                        data-icon="fa fa-file-text">
                        <i class="fa fa-file-text"></i>
                        <cite>采集设置</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="apiset" data-title="API设置"
                        data-icon="fa fa-dot-circle-o">
                        <i class="fa fa-dot-circle-o"></i>
                        <cite>API设置</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="platelist" data-title="专题列表"
                        data-icon="fa fa-calendar">
                        <i class="fa fa-calendar"></i>
                        <cite>专题列表</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="player" data-title="播放器"
                        data-icon="fa fa-hourglass-end">
                        <i class="fa fa-hourglass-end"></i>
                        <cite>播放器</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="banner" data-title="轮播添加"
                        data-icon="fa fa-snowflake-o">
                        <i class="fa fa-snowflake-o"></i>
                        <cite>轮播添加</cite>
                      </a>
                    </div>
                    <div class="layui-col-xs3 layuimini-qiuck-module">
                      <a href="javascript:;" layuimini-content-href="plateadd" data-title="专题添加"
                        data-icon="fa fa-shield">
                        <i class="fa fa-shield"></i>
                        <cite>专题添加</cite>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">
                <i class="fa fa-fire icon"></i>版本信息
              </div>
              <div class="layui-card-body layui-text">
                <table class="layui-table">
                  <colgroup>
                    <col width="100" />
                    <col />
                  </colgroup>
                  <tbody>
                    <tr>
                      <td>开发环境</td>
                      <td>
                        Thinkphp + layuimini + mysql
                      </td>
                    </tr>
                    <tr>
                      <td>当前版本</td>
                      <td>v1.1.1</td>
                    </tr>
                    <tr>
                      <td>主要特色</td>
                      <td>低门栏 / 灵活 / 清爽 / 极简</td>
                    </tr>
                    <tr>
                      <td>演示地址</td>
                      <td>
                        零视聚合-v1：
                        <a href="http://tv.lessh.cn/" target="_blank">
                          点击查看
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">
            <i class="fa fa-bullhorn icon icon-tip"></i>系统公告
          </div>
          <div class="layui-card-body layui-text" id="notices"></div>
        </div>

        <div class="layui-card">
          <div class="layui-card-header">
            <i class="fa fa-paper-plane-o icon"></i>作者心语
          </div>
          <div class="layui-card-body layui-text layadmin-text">
            <p>本程序基于Thinkphp.5.0、layuimini、mysql 进行实现。</p>
            <p>开发不易，请勿随意泛滥二次销售</p>
            <p>
              技术交流QQ群（708298599）：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=54X3Wwh">
                <img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="layuimini"
                  title="layuimini" /></a>（加群请备注来源）
            </p>
            <p>喜欢本程序的朋友欢迎加入我们进行开发交流</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script id="notice" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
  <div class="layuimini-notice">
    <div class="layuimini-notice-title">{{item.title}}</div>
    <div class="layuimini-notice-extra">{{item.time}}</div>
    <div class="layuimini-notice-content layui-hide">
      {{item.content}}
    </div>
  </div>
  {{#  }); }}
</script>

<script>
  layui.use(["layer", "laytpl"], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      laytpl = layui.laytpl;

    $.ajax({
      url: "/action/system/notice",
      type: "post",
      dataType: "json",
      timeout: 3000,
      contentType: "application/x-www-form-urlencoded;charset=utf-8",
      success: function (res) {
        if (res == "") {
          layer.msg("远程公告获取失败");
        } else {
          var getTpl = notice.innerHTML;
          laytpl(getTpl).render(res, function (html) {
            $("#notices").html(html);
          });
        }
      },
    });

    /**
     * 查看公告信息
     **/
    $("body").on("click", ".layuimini-notice", function () {
      var title = $(this).children(".layuimini-notice-title").text(),
        noticeTime = $(this).children(".layuimini-notice-extra").text(),
        content = $(this).children(".layuimini-notice-content").html();
      var html =
        '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
        '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' +
        title +
        "</h4></div>\n" +
        '<div style="font-size: 12px">' +
        content +
        "</div>\n" +
        "</div>\n";
      parent.layer.open({
        type: 1,
        title: "系统公告" +
          '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' +
          noticeTime +
          "</span>",
        area: "300px;",
        shade: 0.8,
        id: "layuimini-notice",
        btn: ["查看", "取消"],
        btnAlign: "c",
        moveType: 1,
        content: html,
        success: function (layero) {
          var btn = layero.find(".layui-layer-btn");
          btn.find(".layui-layer-btn0").attr({
            href: "https://jq.qq.com/?_wv=1027&k=54X3Wwh",
            target: "_blank",
          });
        },
      });
    });
  });
</script>